<template>
  <div>
    <a-button v-if="role=='客户'" type="primary" @click="showDrawer">  咨询客服 </a-button>
    <a-button v-if="role=='客服'" type="primary" @click="showDrawer">  回复客户 </a-button>
    <a-drawer
      title="您好"
      :width="720"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <div v-if="role=='客服'">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane v-for="i in kh_list" :key="i.id" :tab="i.name" :value='i.id'>
          </a-tab-pane>
        </a-tabs>
      </div>
      <div v-if="role == '客服'">
        <a-list item-layout="horizontal" :data-source="data_list">
          <a-list-item slot="renderItem" slot-scope="item, index">
          <a-list-item-meta>
              <a slot="title" v-if="item.kh_id == kh_id">{{ item.role }}</a>
              <a slot="description" v-if="item.kh_id==kh_id">{{ item.message }}</a>
          </a-list-item-meta>
          </a-list-item>
        </a-list>
      </div>
      <div v-if="role == '客户'">
        <a-list item-layout="horizontal" :data-source="data_list">
          <a-list-item slot="renderItem" slot-scope="item, index">
          <a-list-item-meta>
              <a slot="title">{{ item.role }}</a>
              <a slot="description">{{ item.message }}</a>
          </a-list-item-meta>
          </a-list-item>
        </a-list>
      </div>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
      <div>
          <a-input v-model="massager" placeholder="请输入" />
      </div>
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          关闭
        </a-button>
        <a-button type="primary" @click="sendm">
          发送
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>


<script>
import md5 from 'js-md5';
import { send_post } from '../axios_send/api'

export default {
  data() {
    return {
      visible: false,
      massager:'',
      user_id:sessionStorage.getItem('user_id'),
      data_list:[],
      role:sessionStorage.getItem('role'),
      kh_list:[],
      kh_id:'',
    };
  },
  methods: {
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    callback(key) {
      this.kh_id = key
      // console.log(key);
      console.log(this.kh_id)
    },
    sendm(){
        var data = {
            'message':this.massager,
            'user_id':this.user_id,
            'kh_id':this.kh_id
        }
        console.log(this.kh_id)
        send_post(data).then(res=>{
            console.log(res)
        })
    },
    
    // if(_this.role=='客服'){
    //           _this.kh_list = data.kh_list
    //           _this.data_list = data.data_list
    //         }
    //         if(_this.role=='客户'){
    //           _this.data_list = data
    //         }
  },
  mounted(){
        
        var ed2020 = "2020";
        var sign = md5('price=500&goodid=3,1'+ed2020);
        console.log(sign);
        var _this = this;
        //判断浏览器是否支持websocket
        if("WebSocket" in window){
        console.log("支持");
        //生成websocket链接
        var ws = new WebSocket("ws://127.0.0.1:8001/user/chatinfoget/?user_id="+_this.user_id);
        //发送链接请求
        ws.onopen = function(){
          // var data = JSON.stringify({user_id:_this.user_id,kh_id:_this.kh_id})
          ws.send('test');
        }
        //发送消息
        ws.onmessage = function(evt){
            //将获取信息打印
            var received_msg = evt.data;
            // data = JSON.parse(received_msg)
            var data
            
            // 基于准备好的dom，初始化echarts实例
            // 绘制图表
            data = JSON.parse(received_msg)
            if(_this.role=='客服'){
              _this.kh_list = data.kh_list
              _this.data_list = data.data_list
            }
            if(_this.role=='客户'){
              _this.data_list = data.data_list
            }
        }
        //捕获断开链接
        ws.onclose = function(){
            console.log("链接已经关闭");
        }
    }

    },
    created() {
        
        
    }
};
</script>
